<!-- 逻辑代码 写 函数 定义数据
  setup：用 Vue 提供的一种【语法糖】，简化的写法
  lang="ts" 内部写的语言：TypeScript
-->
<script setup lang="ts">
import { ref } from 'vue';

//1，定义基本类型
let num =ref(10)
//代码中如果要修改数据 ，需要通过 .value
const changeNum=()=>{
  num.value++
}

// 2.定义复杂类型
const foods = ref(['西兰花', '猪脚饭', '黄焖鸡米饭'])
const changeFoods = () => {
 foods.value.push('酱香饼')
}

// ref 好像比 reactive 强大一丢丢！
</script>

<!-- 结构 -->
<template>

<!-- ref 定义的数据在 UI 界面中使用或修改不需要写.value -->
<h1 @click="changeNum">num:{{ num }}</h1>
<h1 @click="changeFoods">foods:{{ foods }}</h1>
<button @click="foods.unshift('花菜')">修改数据</button>

</template>


<!-- 样式 -->
<style scoped>


</style>
